<template>
  <div>
    <div class="demo">
      <video-player class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions">

      </video-player>
    </div>
  </div>
</template>

<script>
import {videoPlayer} from 'vue-video-player/src'
import 'video.js/dist/video-js.css'
export default {
  name: "VideoDetail",
  components:{
    videoPlayer
  },
  data(){
    return{
      item:{},
      playerOptions:{
        playbackRates:[0.5, 1.0, 1.5 , 2.0], //播放速度
        autoplay:false, //如果为ture，浏览器尊卑好开始回放
        muted: false, //默认情况下将会消除任何音频
        loop: false, //是否视频已结束就重新开始
        preload: 'auto', //建议浏览器video加载元素后是否开始下载视频数据，auto浏览器选择最佳行为，立即开始加载视频
        language:'zh-CN',
        aspectRatio: '16:9',//将播放器置于流畅模式，并在计算播放器的动态大小来使用该值，值应该代表一个比例，用冒号分隔两个数字
        fluid:true, //当true，video.js player将拥有流体大小，换句话来说，它将按比例缩放以适应其容器
        sources:[{
          type: "video/mp4", //类型
          src :'' //url地址
        }],
        poster:'', //封面地址
        notSupportedMessage:'此视频暂无法播放，请稍后再试',
        controlBar:{
          timeDivider :true, // 当前时间和持续时间的分隔符
          durationDisplay:true, //显示持续时间
          remainingTimeDisplay :false, //是否显示剩余时间功能
          fullscreenToggle:true,//是否显示全屏按钮
        }
      }
    }
  },
  created(){
    let item = this.$route.query.item
    console.log(item)
    this.playerOptions.sources[0].src=item.url
  }
}
</script>

<style scoped>

</style>